<template>
    <div class="left-body">
        <div class="left-top public-bg">
            <div class="public-title">桥隧基本信息</div>
            <div class="top-body">
                <div class="top-left">
                    <div class="top-left-title">
                        <h6>桥隧数</h6>
                        <span><b>5</b>个</span>
                    </div>
                </div>
                <div class="top-right">
                    <div class="top-left-title">
                        <h6>桥隧总长</h6>
                        <span><b>1.567</b>KM</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="left-con public-bg">
            <div class="public-title">桥隧分布情况</div>
            <div class="title-nav" id="leida" ref="waterquality"></div>
        </div>
        <div class="left-bottom public-bg">
            <div class="public-title">传感器数量</div>
            <div class="title-nav" id="wuran" ref="cgq"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'LeftPart',
    props: {
    },
    data() {
        return {
            watermassdistribution: null,
            cgqEcharts: null,
            sensorData: ['倾角传感器', '应力传感器', '振动传感器', '流缝仪', '位移传感器', '动力水平仪', '静力水平仪'],
            sensorData2: [120, 150, 150, 80, 70, 110, 130],
            // 每次显示5个元素
            displayCount: 5,
            startIndex: 0
        }
    },
    mounted() {
        this.initChart1()
        this.initChart2()
        this.updateChart1()
        this.updateChart2()
        this.screenAdapter()
        console.log("echarts1: ", echarts)
    },
    methods: {
        // 初始化cgqEcharts对象
        initChart1() {
            this.watermassdistribution = echarts.init(this.$refs.waterquality);
        },
        initChart2() {
            this.cgqEcharts = echarts.init(this.$refs.cgq);
        },
        // 更新图表数据的函数
        updateChart1() {
            let option = {
                color: ['rgb(187, 37, 100)', 'rgb(80, 211, 186)', 'rgb(226, 189, 94)'],
                legend: {
                    bottom: '10%',
                    data: ['2016', '2017', '2018'],
                    textStyle: {
                        color: 'rgb(146, 195, 226)'
                    }
                },
                radar: {
                    center: ['50%', '40%'],
                    indicator: [
                        { name: '重庆市', max: 65, color: 'rgb(146, 195, 226)' },
                        { name: '北京市', max: 30, color: 'rgb(146, 195, 226)' },
                        { name: '浙江省', max: 30, color: 'rgb(146, 195, 226)' },
                        { name: '上海市', max: 38, color: 'rgb(146, 195, 226)' },
                        { name: '广东省', max: 52, color: 'rgb(146, 195, 226)' },
                    ],
                    textStyle: {
                        color: 'rgb(146, 195, 226)'
                    },
                    radius: '45%'
                },

                series: [
                    {
                        name: '2016',
                        type: 'radar',
                        data: [
                            {
                                value: [42, 18, 28, 35, 50, 18],
                                name: '2016',
                                symbolSize: 5,
                                label: {
                                    show: true,
                                    position: 'top',
                                    color: 'rgb(187, 37, 100)',
                                    fontWeight: 'bold'
                                },
                                
                            },

                        ],

                    },
                    {
                        name: '2017',
                        type: 'radar',
                        data: [
                            {
                                value: [50, 8, 20, 26, 42, 21],
                                name: '2017',
                                symbolSize: 5,

                            },
                        ],

                    },
                    {
                        name: '2018',
                        type: 'radar',
                        data: [
                            {
                                value: [45, 12, 20, 24, 32, 19],
                                name: '2018',
                                symbolSize: 5
                            }
                        ],

                    },
                ]
            };
            this.watermassdistribution.setOption(option);
        },
        updateChart2() {
            // 获取当前要显示的数据
            const currentData1 = []
            const currentData2 = []
            // 循环获取5个数据，确保不重复
            for (let i = 0; i < this.displayCount; i++) {
                const index = (this.startIndex + i) % this.sensorData.length
                currentData1.push(this.sensorData[index])
                currentData2.push(this.sensorData2[index])
            }
            var Option = {
                grid: {
                    top: '5%',
                    left: '2%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    show: false
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    type: 'category',
                    data: currentData1,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#ffffff',
                            fontSize: 12,
                            fontFamily: 'Arial'
                        }
                    }
                },
                series: [
                    {
                        data: currentData2,
                        type: 'bar',
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [
                                    { offset: 0, color: '#1e3a8a' },   // 深蓝色起始
                                    { offset: 1, color: '#06b6d4' }    // 青色结束
                                ]
                            },
                            borderRadius: [8, 8, 8, 8]
                        },
                        barWidth: '60%',
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{c}',
                            fontSize: 12,
                            color: 'rgba(255,255,255,0.8)',
                            backgroundColor: 'transparent',
                            padding: [2, 4, 2, 4],
                            borderRadius: 2
                        }
                    }
                ]
            }
            this.cgqEcharts.setOption(Option);
        },
        screenAdapter() {
            setInterval(() => {
                this.startIndex = (this.startIndex + 1) % this.sensorData.length
                this.updateChart2();
            }, 2000);
        }

    }
}
</script>

<style scoped>
.left-body {
    width: 22%;
    height: 100%;
    float: left;
    margin: 0 0.3%;
}

.left-body .left-top {
    width: 100%;
    height: 27%;
    
}

.left-body .left-top .top-body {
    width: 100%;
    height: calc(100% - 30px);
    display: flex;
}

.left-body .left-top .top-body .top-left {
    /* float: left; */
    width: 30%;
    height: 100%;
    margin-left: 40px;
    /* border: 1px solid red; */
}

.top-left-title {
    width: 100%;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
}

.top-left-title h6 {
    color: #bad0e2;
}

.top-left-title span {
    margin-top: 30px;
    display: inline-block;
    color: #2aa4f1;

    /*    height: 80px;
    line-height: 80px;*/
}

.top-left-title span b {
    font-size: 30px;
    letter-spacing: 5px;
}

.top-left-title img {
    width: 80%;
}

.left-body .left-top .top-body .top-right {
    /* float: left; */
    width: 35%;
    height: 100%;
    margin-right: 20px;
    /* border: 1px solid red; */
}

.left-body .left-con {
    width: 100%;
    height: 38%;
    margin-top: 1.6%;
}

.title-nav {
    width: 100%;
    height: calc(100% - 30px);
}

.left-body .left-bottom {
    width: 100%;
    height: 32%;
    margin-top: 1.6%;
}
</style>